<template>
	<view class="exchangeInteractive">
		
		<view class="content" v-for="(item, index) in list" :key="index">
			<view class="title-box"> 
				<view class="title"> {{item.title}} </view>
				<view class="time"> {{item.caeate_time}} </view>
			</view>
			<view class="con-box"> 
				<view class="con1"> 已发放{{item.send_val}} </view>
				<view class="con2"> 待发放{{item.wait_expend_val}} </view>
			</view>
			<view class="disc-box-box">
				<view class="disc-box" v-show="item.is_open == 1 ? true : false"
				:style="index1+1 == item.log_list.length ? 'border-bottom: 0px;' : ''"
				v-for="(item1, index1) in item.log_list" :key="index1">
					<view class="disc" >
						<view class="disc-time"> {{item1.key}}、发放时间：{{item1.send_time}} </view>
						<view class="disc-con">
							<view class="disc-num"> 发放数量：{{item1.batch_val}} </view>
							<view class="dise-type" :style="item1.status == 1 ? 'background: #00b893;' : 'background: #fe827a;'"> 
								{{item1.status == 1 ? '已' : '待'}} 
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="more-box" @click="more(index)">
				<view class="more-p"> {{item.is_open == 0 ? '展开' : '收起'}} </view>
				<image class="more-img" :src="item.is_open == 0 ? 'https://hdsq.aoorange.cn/attachment/xcx/new_2022/bottom_blue.png' : 'https://hdsq.aoorange.cn/attachment/xcx/new_2022/up_blue.png'" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
import serve from '../../static/request.js';
import storage from '../../static/appkey.js';
import common from '../../static/jump.js';
export default {
	data() {
		return {
			list: [],
		}
	},
	methods: {
		getList(){
			var self = this;
			serve.request({
				url: '/common/exchange/list',
				data: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token')
				}
			}).then(res => {
				self.list = res.data;
			});
		},
		more(index){
			let item = this.list[index];
			if(item.is_open == 0){
				item.is_open = 1
			}else{
				item.is_open = 0
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onPullDownRefresh() {
		this.list=[];
		this.getList();
	},
};
</script>

<style lang="scss" scoped>
	.exchangeInteractive{
		width: 100vw;
		.content{
			width: 702rpx;
			margin-left: 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-top: 20rpx;
			color: #333333;
			font-size: 32rpx;
			border-bottom: 24rpx #F9F9FB solid;
			.title-box{
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{}
				.time{color: #999999;font-size: 28rpx;}
			}
			
			.con-box{
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.con1{color: #e64545;}
				.con2{}
			}
			.disc-box-box{
				border-radius: 8rpx;
				padding: 0 10rpx;
				background: #f8f8f8;
				.disc-box{
					height: 80rpx;
					line-height: 80rpx;
					// border-bottom: 1px solid #e5e5e5;
					.disc{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.disc-time{
							color: #999999;
						}
						.disc-con{
							display: flex;
							align-items: center;
							.disc-num{
								color: #e64545;
							}
							.dise-type{
								margin-left: 20rpx;
								width: 50rpx;height: 50rpx;border-radius: 50%;font-size: 26rpx;
								background-color: #00b893;color: #FFFFFF; text-align: center;line-height: 50rpx;
							}
						}
						
					}
				}
			}
			
			.more-box{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.more-p{
					font-size: 32rpx;
					color: #219afc;
				}
				.more-img{
					margin-left: 10rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}
		}

	}

</style>
